{% load i18n %}{% load staticfiles %}<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <link rel="icon" href="{% static "img/favicon.ico" %}">
    <title>{% block title %}PyDash v{{ version }}{% endblock %}</title>
    <link href="{% static "css/bootstrap.min.css" %}" rel="stylesheet">
    <link href="{% static "css/bootstrap-responsive.min.css" %}" rel="stylesheet">
    <link href="{% static "css/fonts.css" %}" rel="stylesheet">
    <link href="{% static "css/font-awesome.css" %}" rel="stylesheet">
    <link href="{% static "css/style.css" %}" rel="stylesheet">
    <link href="{% static "css/dashboard.css" %}" rel="stylesheet">

    {% block style %}{% endblock %}
</head>
<body>
<a href="https://github.com/k3oni/pydash"><img style="position: absolute; top: 0; right: 0; border: 0;z-index:99999999;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
<div class="navbar navbar-fixed-top" style="">
    <div class="navbar-inner">
    <div class="container">
            <a class="brand" href="/">pyDash v{{ version }}</a>
            <ul class="btn btn-mini">
                {% if request.user.is_authenticated or user.is_authenticated %}
                        <a href="{% url 'logout' %}">{% trans "Sign out" %}</a>
                {% else %}
                        <a href="{% url 'login' %}">{% trans "Sign in" %}</a>
                {% endif %}
            </ul>
            <div class="nav-collapse">
        </div>
        </div>
    </div>
 </div>
<div class="subnavbar visible-desktop visible-tablet">
  <div class="subnavbar-inner">
      <div class="container">
        <ul class="mainnav">
            <li><a href="#refresh-os"><i class="fa fa-dashboard"></i><span>General</span> </a> </li>
            <li><a href="#refresh-df"><i class="fa fa-hdd-o"></i><span>Disk</span> </a> </li>
            <li><a href="#refresh-cpu"><i class="fa fa-check"></i><span>CPU</span> </a> </li>
            <li><a href="#refresh-ram"><i class="fa fa-list-alt"></i><span>RAM</span> </a> </li>
            <li><a href="#refresh-load"><i class="fa fa-bolt"></i><span>Load</span> </a> </li>
            <li><a href="#refresh-online"><i class="fa fa-user"></i><span>Users</span> </a> </li>
            <li><a href="#refresh-netstat"><i class="fa fa-angle-down"></i><span>Netstat</span> </a> </li>
            <li><a href="#refresh-ispeed"><i class="fa fa-exchange"></i><span>Network</span> </a> </li>
            <li><a href="#refresh-ps"><i class="fa fa-list-alt"></i><span>Processes</span> </a> </li>
            <li></li>
    </ul>
      </div>
      <!-- /container --> 
    </div>
  <!-- /subnavbar-inner --> 
</div>
<div class="main">
  <div class="main-inner"> 
    <div class="container">
    {% block content %}
        
     <div class="row">
        
        <div class="span3">
         <div class="widget widget-table action-table">
            <div class="widget-header"> <i class="fa fa-dashboard"></i>
              <h3>General Info</h3><i class="fa fa-minus"></i>
              <div id="refresh-os">
              </div>
            </div>
            <!-- /widget-header -->
            <div class="widget-content">
                <br>
              <div style="text-align:center;">
        <b>OS:</b> <span class="" id="get-osname"></span><br>
                <b>Uptime:</b> <span class="" id="get-uptime"></span> Hours<br>
                <b>Hostname:</b> <span class="" id="get-hostname"></span><br>
                <b>Kernel:</b> <span class="" id="get-kernel"></span><br>
        <b>CPU(s):</b> <span class="" id="get-cpucount"></span> x <span class="" id="get-cputype"></span>
                <br><br>
              </div>
            </div>
            <!-- /widget-content -->
          </div>
          <!-- /widget -->
        </div>
        
        <div class="span3">
         <div class="widget widget-table action-table">
            <div class="widget-header"> <i class="fa fa-check"></i>
              <h3>CPU Usage %</h3><i class="fa fa-minus"></i>
              <div id="refresh-cpu">
              </div>
            </div>
            <!-- /widget-header -->
            <div class="widget-content">
            <p></p>
                <canvas id="cpuuChart" width="270" height="180"></canvas>
                <div>
                <span class="cpuf">{% trans "Free" %}</span>
                <span class="cpuu">{% trans "Used" %}</span>
            </div>
            </div>
            <!-- /widget-content -->
          </div>
          <!-- /widget -->
        </div>
        
        <div class="span6">
         <div class="widget widget-nopad">
            <div class="widget-header"> <i class="fa fa-list-alt"></i>
                <h3>Memory Usage</h3><i class="fa fa-minus"></i>
                <div id="refresh-ram">
                </div>
            </div>
            <!-- /widget-header -->
                <div class="widget-content">
                    <p></p>
                    <canvas id="memoryChart" width="560" height="200"></canvas>
                    <div>
                <span class="memf">{% trans "Free" %}</span>
                <span class="memu">{% trans "Used" %}</span>
                <span class="memb">{% trans "Buffers" %}</span>
                <span class="memc">{% trans "Cached" %}</span>
                </div>
                </div>
                <!-- /widget-content -->
                
              </div>
        </div>
        
     </div>
    
    <div class="row">
         <div class="span6">
           <div class="widget widget-table action-table">
            <div class="widget-header"> <i class="fa fa-hdd-o"></i>
              <h3>Disk Usage</h3><i class="fa fa-minus"></i>
              <div id="refresh-df">
              </div>
            </div>
            <!-- /widget-header -->
            <div class="widget-content">
        <table id="get_disk" class="table table-hover table-condensed table-bordered" >
        </table>
            </div>
            <!-- /widget-content -->
          </div>
          <!-- /widget -->
         </div>
          <div class="span6">
            <div class="widget widget-table action-table">
            <div class="widget-header"> <i class="fa fa-bolt"></i>
              <h3>Load Average</h3><i class="fa fa-minus"></i>
              <div id="refresh-load">
              </div>
            </div>
            <!-- /widget-header -->
            <div class="widget-content">
                <p></p>
                <canvas id="loadChart" width="560" height="200"></canvas>
            </div>
            <!-- /widget-content -->
          </div>
          <!-- /widget -->
          </div>
        <!-- /span6 -->
        </div>
    <!-- /row -->
    
    
      <div class="row">
        <div class="span6">
           <div class="widget widget-table action-table">
            <div class="widget-header"> <i class="fa fa-level-up"></i>
              <h3>IP Adresses</h3><i class="fa fa-minus"></i>
              <div id="refresh-ip">
              </div>
            </div>
            <!-- /widget-header -->
            <div class="widget-content">
        <table id="get_ips" class="table table-hover table-condensed table-bordered">
        </table>
            </div>
            <!-- /widget-content -->
          </div>
          <!-- /widget -->
         </div>
         <!-- /span -->
    
         <div class="span3">
           <div class="widget">
            <div class="widget-header"> <i class="fa fa-exchange"></i>
              <h3>Internet Traffic</h3><i class="fa fa-minus"></i>
              <div id="refresh-ispeed">
              </div>
            </div>
            <!-- /widget-header -->
            <div class="widget-content">
            <p></p>
                <canvas id="trfChart" width="270" height="200"></canvas>
                <div>
                <span class="netin">{% trans "In" %}</span>
                <span class="netout">{% trans "Out" %}</span>
            </div>
            </div>
            
            <!-- /widget-content -->
          </div>
          <!-- /widget -->
         </div><!-- /span -->
         
         <div class="span3">
           <div class="widget">
            <div class="widget-header"> <i class="fa fa-angle-up"></i>
              <h3>Disk Reads/Writes</h3><i class="fa fa-minus"></i>
              <div id="refresh-diskio">
              </div>
            </div>
            <!-- /widget-header -->
            <div class="widget-content">
            <p></p>
                <canvas id="dskChart" width="270" height="200"></canvas>
                <div>
                <span class="diskr">{% trans "Reads" %}</span>
                <span class="diskw">{% trans "Writes" %}</span>
            </div>
            </div>
            <!-- /widget-content -->
          </div>
          <!-- /widget -->
         </div>
         <!-- /span -->
      </div>
      <!-- /row -->

    <div class="row">
        <div class="span6">
             <div class="widget widget-table action-table">
                <div class="widget-header"> <i class="fa fa-group"></i>
                  <h3>Online</h3><i class="fa fa-minus"></i>
                  <div id="refresh-online">
                  </div>
                </div>
                <!-- /widget-header -->
                <div class="widget-content">
                    <table id="get_users" class="table table-hover table-condensed table-bordered">
                    </table>
                </div>
                <!-- /widget-content -->
             </div>
              <!-- /widget -->
        </div>
        <!-- /span -->
        <div class="span6">
             <div class="widget widget-table action-table">
                <div class="widget-header"> <i class="fa fa-angle-down"></i>
                  <h3>Netstat</h3><i class="fa fa-minus"></i>
                  <div id="refresh-netstat">
                  </div>
                </div>
                <!-- /widget-header -->
                <div class="widget-content">
                    <table id="get_netstat" class="table table-hover table-condensed table-bordered">
                    </table>
                </div>
                <!-- /widget-content -->
             </div>
              <!-- /widget -->
        </div>
        <!-- /span -->
    </div>
    <!-- /row -->

      <div class="row">
        <div class="span12">
          <div class="widget">
            <div class="widget-header"> <i class="fa fa-list-alt"></i>
              <h3> Processes </h3><i class="fa fa-minus"></i>
              <div id="refresh-ps">
              </div>
            </div>
            <!-- /widget-header -->
            <div class="widget-content">
        <table id="get_proc" class="table table-hover table-condensed table-bordered">
        </table>
            </div>
            <!-- /widget-content -->
          </div>
          <!-- /widget -->
        </div>
        <!-- /span -->
      </div>
      <!-- /row -->
      </div>
      <!-- /container -->
    </div>
    <!-- /main-inner -->
 </div>  
<!-- /main -->      

<div class="footer">
  <div class="footer-inner">
    <div class="container">
      <div class="row">
        <div class="span6">&copy; 2014 by <a href="http://github.com/k3oni">Florian Neagu</a> </div>
        <!-- /span12 --> 
      </div>
      <!-- /row --> 
    </div>
    <!-- /container --> 
  </div>
  <!-- /footer-inner --> 
</div>
<!-- /footer --> 

{% endblock %}

{% block script %}
<script src="{% static "js/jquery.js" %}"></script>
<script src="{% static "js/bootstrap.js" %}"></script>
<script src="{% static "js/base.js" %}"></script>
<script src="{% static "js/Chart.min.js" %}"></script>
<script src="{% static "js/jquery.dataTables.min.js" %}"></script>
<script src="{% static "js/dashboard.js" %}"></script>
<!--[if lte IE 8]>
    <script src="{% static "js/excanvas.js" %}"></script>
<![endif]-->
<script type="text/javascript">

var mem_ctx = $("#memoryChart").get(0).getContext("2d");
        var memChart = new Chart(mem_ctx);
        function memory_usage(){
            $.getJSON('/info/memory/', function(data) {
                var options = {
                    animation : false,
                    pointDotRadius : 4,
                    scaleLabel : "<%=value%> Mb"
                }
                memChart.Line(data, options);
            });
        }

var cpu_ctx = $("#cpuuChart").get(0).getContext("2d");
        var cpuChart = new Chart(cpu_ctx);
        function cpuu_usage(){
            $.getJSON('/info/cpuusage/', function(data) {
                var options = {
                    percentageInnerCutout : 50,
                    segmentStrokeWidth : 0
                }
                cpuChart.Doughnut(data, options);
            });
        }

var trf_ctx = $("#trfChart").get(0).getContext("2d");
        var trfChart = new Chart(trf_ctx);
        function traffic_usage(){
            $.getJSON('/info/gettraffic/', function(data) {
                var options = {
                    animation : false,
                    pointDotRadius : 2,
                    scaleLabel : "<%=value%>"
                }
                trfChart.Line(data, options);
            });
        }
        
var dsk_ctx = $("#dskChart").get(0).getContext("2d");
        var dskChart = new Chart(dsk_ctx);
        function disk_io(){
            $.getJSON('/info/getdiskio/', function(data) {
                var options = {
                    animation : false,
                    pointDotRadius : 2,
                    scaleLabel : "<%=value%>"
                }
                dskChart.Line(data, options);
            });
        }

var load_ctx = $("#loadChart").get(0).getContext("2d");
        var loadChart = new Chart(load_ctx);
        function load_average(){
            $.getJSON('/info/loadaverage/', function(data) {
                var options = {
                    animation : false,
                    pointDotRadius : 2,
                    scaleLabel : "<%=value%>"
                }
                loadChart.Line(data, options);
            });
        }

$(function() {
            window.setInterval('dashboard.getProc()', {{ time_refresh_long }});
            window.setInterval('memory_usage()', {{ time_refresh }});
            window.setInterval('load_average()', {{ time_refresh }});
            window.setInterval('cpuu_usage()', {{ time_refresh }});
            window.setInterval('traffic_usage()', {{ time_refresh_net }});
            window.setInterval('disk_io()', {{ time_refresh_net }});
            window.setInterval('dashboard.getUptime()', {{ time_refresh_long }});
            window.setInterval('dashboard.getDisk()', {{ time_refresh_long }});
            window.setInterval('dashboard.getUsers()', {{ time_refresh_long }});
            window.setInterval('dashboard.getNetstat()', {{ time_refresh_long }});
        });

$(function pageLoad() {
    dashboard.getProc();
    memory_usage();
    load_average();
    cpuu_usage();
    traffic_usage();
    disk_io();
    dashboard.getOSname();
    dashboard.getUptime();
    dashboard.getHostname();
    dashboard.getKernel();
    dashboard.getCPUcount();
    dashboard.getCPUtype();
    dashboard.getDisk();
    dashboard.getUsers();
    dashboard.getNetstat();
    dashboard.getIps();
    });
</script>


{% endblock %}

</body>
</html>
